<template>
    <div>

        <el-dialog v-model="dialogVisible" width="45%" :before-close="handleClosed">
            <el-form v-model="form">
                <el-row>
                    <el-form-item label="仓库名称">
                        <el-input v-model="form.wareName" placeholder="请输入仓库名称"></el-input>
                    </el-form-item>
                    <el-form-item label="仓库地址" label-width="100">
                        <el-input v-model="form.address" placeholder="请输入仓库名称"></el-input>
                    </el-form-item>
                    <el-form-item label="面积" label-width="100">
                        <el-input-number :min="0" :precision="2" :step="0.05" v-model="form.area"></el-input-number>
                    </el-form-item>
                </el-row>
                <el-form-item label="备注" label-width="66">
                    <el-input type="textarea" v-model="form.remark" placeholder="输入备注"></el-input>
                </el-form-item>
            </el-form>
            <el-form>
                <el-row>
                    <el-form-item label="负责人" label-width="66">
                        <el-input v-model="form.emp" style="width:500px" t
                                  placeholder="请输入负责人名称"></el-input>
                    </el-form-item>
                    <el-form-item label-width="10">
                        <el-button type="primary" @click="queryEmp">查询</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-result v-if="selectedEmp.idEmployee !== undefined"
                       icon="success"
                       :title="`已选择${selectedEmp.name}为负责人`"
                       sub-title="可以点击重新选择，重新制定其他负责人，或点击提交去创建仓库"
            >
                <template #extra>
                    <el-button @click="handleReSelect" type="default">重新选择</el-button>
                    <el-button  v-loading.fullscreen.lock="screenLoading" @click="handleAdd" type="primary">提交</el-button>
                </template>
            </el-result>
            <el-table  v-else :data="empData" height="300">

                <el-table-column prop="idEmployee" label="编号"></el-table-column>
                <el-table-column prop="position" label="职务"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="绑定后，该员工将作为车间负责人"
                                placement="top-start"
                        >
                            <el-button :disabled="form.area===0 && form.name===''" type="primary" plain
                                       @click="handleBind(scope.row)">绑定
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>
    </div>
</template>

<script>
import empAPI from "@/util/request-md/emp/empAPI.js";
import wareAPI from "@/util/request-md/ware/ware.js";

export default {
    emits: ['callClosed','callSuccess'],
    props: ['info', 'visible', 'isEdit'],
    name: "MakeWareDialog",
    data() {
        return {
            dialogVisible: false,
            form: {
                wareName: '',
                address: '',
                area: 0,
                headId:'',
                emp: '',
                status: '',
                remark: '',
            },
            empData: [],
            screenLoading: false,
            selectedEmp: {},
        }
    },
    watch: {
        'visible'(val) {
            if (this.isEdit) {
                this.form = this.info;
            } else {
                this.form =  {
                    wareName: '',
                    address: '',
                    area: 0,
                    headId:'',
                    emp: '',
                    status: '',
                    remark: '',
                };
            }
            this.dialogVisible = val;
        }
    },
    methods: {
        handleClosed() {
            this.$emit("callClosed");
        },
        handleBind(data) {
            this.selectedEmp = data;
            this.form.headId = data.idEmployee;
        },
        handleReSelect(){
          this.selectedEmp ={};
        },
        handleAdd(){
            this.screenLoading = true;
          wareAPI.addWare(this.form,res=>{
              if(res.code===200){
                  this.$message({
                      type: 'success',
                      message: '添加成功!'
                  });
                  this.screenLoading = false;
                  this.$emit('callSuccess');
              }else{
                  this.$message.error(`网络异常:${res.msg}`);
              }
          })
        },
        //加载数据
        loadEmpData() {
            empAPI.getEmployeesByName(this.form, (data) => {
                if (data.code === 200) {
                    this.empData = data.data;
                } else {
                    this.$message.error(`网络异常:${data.msg}`);
                }
            })
        },
        queryEmp() {
            this.loadEmpData();
        }
    },
    mounted() {
        this.loadEmpData();
    }
}
</script>

<style scoped>

</style>